<template>
  <div>
    <div class="top">
      <div class="cynav">
        <div class="cynav_child">
          <h3>茶叶</h3>
              
        </div>
        <div class="cynav_childlist" >
          <div v-for="(i, $index) in arr2" @click='index=$index' :key="$index">
            {{i.title}}
          </div>
        </div>
      </div>
    </div>
  
    
    <div class="cyBOX">
    <transition v-for="(i, $index) in arr2" :key="$index">
    <div v-show='$index==index'>
      <div class="cyzs" v-for="(i,$index) in i.children" :key="$index">
        <router-link :to="'/cymb/'+i.id">
        <img :src="i.img1" alt="" class="xf" />
        <p style="padding-top:10px;">{{i.title}}</p>
        <span>{{i.price}}</span> 
          <i>→</i>
         </router-link>

      </div>
    </div>

    </transition>
      
      
    </div>
   
    
    <div class="fynav">
      <el-pagination background layout="prev, pager, next" :total="40">
      </el-pagination>
    </div>
    
  </div>
</template>
<script>
  export default {
    
    data() {
      return {
         index:0,
       arr2:[
         
                    {
                        title: '全部',
                        children:[
                           {
                            img1:'https://ccdn.goodq.top/caches/9b69daffc17579b848483c854813cad2/aHR0cDovLzVjZGQzYWE1YzQ2ZWEudDczLnFpZmVpeWUuY29tL3FmeS1jb250ZW50L3VwbG9hZHMvMjAxOS8wNC84MzE0ZmY2ZjJiOTI3NzFmZjY3ZTk2N2VmNDI2MDNlYi00MDB4NDAwLTkwLndlYnA_p_p100_p_3D.webp',
                            id: 0,
                            title: '茉莉花茶',
                            price: '￥223.0',
                           },
                           {
                            img1:'https://ccdn.goodq.top/caches/9b69daffc17579b848483c854813cad2/aHR0cDovLzVjZGQzYWE1YzQ2ZWEudDczLnFpZmVpeWUuY29tL3FmeS1jb250ZW50L3VwbG9hZHMvMjAxOS8wNC8wYWQzN2JkNDA4Y2NhYzBjMjRjYmY3N2IwNmI0ODg4MC00MDB4NDAwLTkwLndlYnA_p_p100_p_3D.webp',
                            id: 1,
                            title: '白牡丹',
                            price: '￥1，2350',
                           },
                           {
                            img1:'https://ccdn.goodq.top/caches/9b69daffc17579b848483c854813cad2/aHR0cDovLzVjZGQzYWE1YzQ2ZWEudDczLnFpZmVpeWUuY29tL3FmeS1jb250ZW50L3VwbG9hZHMvMjAxOS8wNC85Nzg1NTAwNmNjMDUwNDU4ZWQwMWZmMTY3YjhiM2Q5Ny00MDB4NDAwLTkwLndlYnA_p_p100_p_3D.webp',
                            id: 2,
                            title: '白毫银针',
                            price: '￥258.0',
                           },
                           {
                            img1:'https://ccdn.goodq.top/caches/9b69daffc17579b848483c854813cad2/aHR0cDovLzVjZGQzYWE1YzQ2ZWEudDczLnFpZmVpeWUuY29tL3FmeS1jb250ZW50L3VwbG9hZHMvMjAxOS8wNC8wMzMyODZmNzRlZTgzZmIzZTkxOWVlODAwNzgyNGM1MC00MDB4NDAwLTkwLndlYnA_p_p100_p_3D.webp',
                            id: 3,
                            title: '云南普洱',
                            price: '￥500.0',
                           },
                           {
                            img1:'https://ccdn.goodq.top/caches/9b69daffc17579b848483c854813cad2/aHR0cDovLzVjZGQzYWE1YzQ2ZWEudDczLnFpZmVpeWUuY29tL3FmeS1jb250ZW50L3VwbG9hZHMvMjAxOS8wNC8yNjVmNTg1ZTlmY2ZiOTEwMGUzNzViYWQwNDI1OTAzMS00MDB4NDAwLTkwLndlYnA_p_p100_p_3D.webp',
                            id: 4,
                            title: '湖北老青茶',
                            price: '￥400.0',
                           },
                           {
                            img1:'https://ccdn.goodq.top/caches/9b69daffc17579b848483c854813cad2/aHR0cDovLzVjZGQzYWE1YzQ2ZWEudDczLnFpZmVpeWUuY29tL3FmeS1jb250ZW50L3VwbG9hZHMvMjAxOS8wNC8yOGVhMWYwNDRjY2E5Yjg1YTNhZmQzMTFjNzNlNjcyNC00MDB4NDAwLTkwLndlYnA_p_p100_p_3D.webp',
                            id: 5,
                            title: '霍山黄芽濛而银针',
                            price: '￥711.0',
                           },
                           {
                            img1:'https://ccdn.goodq.top/caches/9b69daffc17579b848483c854813cad2/aHR0cDovLzVjZGQzYWE1YzQ2ZWEudDczLnFpZmVpeWUuY29tL3FmeS1jb250ZW50L3VwbG9hZHMvMjAxOS8wNC84MzE0ZmY2ZjJiOTI3NzFmZjY3ZTk2N2VmNDI2MDNlYi00MDB4NDAwLTkwLndlYnA_p_p100_p_3D.webp',
                            id: 6,
                            title: '茉莉花茶',
                            price: '￥223.0',
                           },
                           {
                            img1:'https://ccdn.goodq.top/caches/9b69daffc17579b848483c854813cad2/aHR0cDovLzVjZGQzYWE1YzQ2ZWEudDczLnFpZmVpeWUuY29tL3FmeS1jb250ZW50L3VwbG9hZHMvMjAxOS8wNC8wYWQzN2JkNDA4Y2NhYzBjMjRjYmY3N2IwNmI0ODg4MC00MDB4NDAwLTkwLndlYnA_p_p100_p_3D.webp',
                            id: 7,
                            title: '白牡丹',
                            price: '￥1，2350',
                           },
                            {
                            img1:'https://ccdn.goodq.top/caches/9b69daffc17579b848483c854813cad2/aHR0cDovLzVjZGQzYWE1YzQ2ZWEudDczLnFpZmVpeWUuY29tL3FmeS1jb250ZW50L3VwbG9hZHMvMjAxOS8wNC85Nzg1NTAwNmNjMDUwNDU4ZWQwMWZmMTY3YjhiM2Q5Ny00MDB4NDAwLTkwLndlYnA_p_p100_p_3D.webp',
                            id: 8,
                            title: '白毫银针',
                            price: '￥258.0',
                           },
                            {
                            img1:'https://ccdn.goodq.top/caches/9b69daffc17579b848483c854813cad2/aHR0cDovLzVjZGQzYWE1YzQ2ZWEudDczLnFpZmVpeWUuY29tL3FmeS1jb250ZW50L3VwbG9hZHMvMjAxOS8wNC8wMzMyODZmNzRlZTgzZmIzZTkxOWVlODAwNzgyNGM1MC00MDB4NDAwLTkwLndlYnA_p_p100_p_3D.webp',
                            id: 9,
                            title: '云南普洱',
                            price: '￥500.0',
                           },
                        
                        ]
                          
                    },
                      {
                        title: '绿茶',
                        children:[
                          {
                            img1:'https://ccdn.goodq.top/caches/9b69daffc17579b848483c854813cad2/aHR0cDovLzVjZGQzYWE1YzQ2ZWEudDczLnFpZmVpeWUuY29tL3FmeS1jb250ZW50L3VwbG9hZHMvMjAxOS8wNC84MzE0ZmY2ZjJiOTI3NzFmZjY3ZTk2N2VmNDI2MDNlYi00MDB4NDAwLTkwLndlYnA_p_p100_p_3D.webp',
                            id: 10,
                            title: '茉莉花茶',
                            price: '￥223.0',
                           },
                           {
                            img1:'https://ccdn.goodq.top/caches/9b69daffc17579b848483c854813cad2/aHR0cDovLzVjZGQzYWE1YzQ2ZWEudDczLnFpZmVpeWUuY29tL3FmeS1jb250ZW50L3VwbG9hZHMvMjAxOS8wNC8wYWQzN2JkNDA4Y2NhYzBjMjRjYmY3N2IwNmI0ODg4MC00MDB4NDAwLTkwLndlYnA_p_p100_p_3D.webp',
                            id: 11,
                            title: '白牡丹',
                            price: '￥1，2350',
                           },
                         
                        ]
                    },
                    {
                        title: '黄茶',
                        children:[
                        {
                            img1:'https://ccdn.goodq.top/caches/9b69daffc17579b848483c854813cad2/aHR0cDovLzVjZGQzYWE1YzQ2ZWEudDczLnFpZmVpeWUuY29tL3FmeS1jb250ZW50L3VwbG9hZHMvMjAxOS8wNC8yOGVhMWYwNDRjY2E5Yjg1YTNhZmQzMTFjNzNlNjcyNC00MDB4NDAwLTkwLndlYnA_p_p100_p_3D.webp',
                            id: 12,
                            title: '霍山黄芽濛而银针',
                            price: '￥711.0',
                           },
                           {
                            img1:'https://ccdn.goodq.top/caches/9b69daffc17579b848483c854813cad2/aHR0cDovLzVjZGQzYWE1YzQ2ZWEudDczLnFpZmVpeWUuY29tL3FmeS1jb250ZW50L3VwbG9hZHMvMjAxOS8wNC84MzE0ZmY2ZjJiOTI3NzFmZjY3ZTk2N2VmNDI2MDNlYi00MDB4NDAwLTkwLndlYnA_p_p100_p_3D.webp',
                            id: 13,
                            title: '茉莉花茶',
                            price: '￥223.0',
                           },
                         
                        ]
                    },
                    {
                        title: '乌龙茶',
                        children:[
                        {
                            img1:'https://ccdn.goodq.top/caches/9b69daffc17579b848483c854813cad2/aHR0cDovLzVjZGQzYWE1YzQ2ZWEudDczLnFpZmVpeWUuY29tL3FmeS1jb250ZW50L3VwbG9hZHMvMjAxOS8wNC8yOGVhMWYwNDRjY2E5Yjg1YTNhZmQzMTFjNzNlNjcyNC00MDB4NDAwLTkwLndlYnA_p_p100_p_3D.webp',
                            id: 14,
                            title: '霍山黄芽濛而银针',
                            price: '￥711.0',
                           },
                           {
                            img1:'https://ccdn.goodq.top/caches/9b69daffc17579b848483c854813cad2/aHR0cDovLzVjZGQzYWE1YzQ2ZWEudDczLnFpZmVpeWUuY29tL3FmeS1jb250ZW50L3VwbG9hZHMvMjAxOS8wNC84MzE0ZmY2ZjJiOTI3NzFmZjY3ZTk2N2VmNDI2MDNlYi00MDB4NDAwLTkwLndlYnA_p_p100_p_3D.webp',
                            id: 15,
                            title: '茉莉花茶',
                            price: '￥223.0',
                           },
                         
                        ]
                    },
                     {
                        title: '红茶',
                        children:[
                        {
                            img1:'https://ccdn.goodq.top/caches/9b69daffc17579b848483c854813cad2/aHR0cDovLzVjZGQzYWE1YzQ2ZWEudDczLnFpZmVpeWUuY29tL3FmeS1jb250ZW50L3VwbG9hZHMvMjAxOS8wNC8yOGVhMWYwNDRjY2E5Yjg1YTNhZmQzMTFjNzNlNjcyNC00MDB4NDAwLTkwLndlYnA_p_p100_p_3D.webp',
                            id: 16,
                            title: '霍山黄芽濛而银针',
                            price: '￥711.0',
                           },
                           {
                            img1:'https://ccdn.goodq.top/caches/9b69daffc17579b848483c854813cad2/aHR0cDovLzVjZGQzYWE1YzQ2ZWEudDczLnFpZmVpeWUuY29tL3FmeS1jb250ZW50L3VwbG9hZHMvMjAxOS8wNC84MzE0ZmY2ZjJiOTI3NzFmZjY3ZTk2N2VmNDI2MDNlYi00MDB4NDAwLTkwLndlYnA_p_p100_p_3D.webp',
                            id: 17,
                            title: '茉莉花茶',
                            price: '￥223.0',
                           },
                         
                        ]
                    },
                     {
                        title: '黑茶',
                        children:[
                        {
                            img1:'https://ccdn.goodq.top/caches/9b69daffc17579b848483c854813cad2/aHR0cDovLzVjZGQzYWE1YzQ2ZWEudDczLnFpZmVpeWUuY29tL3FmeS1jb250ZW50L3VwbG9hZHMvMjAxOS8wNC8yOGVhMWYwNDRjY2E5Yjg1YTNhZmQzMTFjNzNlNjcyNC00MDB4NDAwLTkwLndlYnA_p_p100_p_3D.webp',
                            id: 18,
                            title: '霍山黄芽濛而银针',
                            price: '￥711.0',
                           },
                           {
                            img1:'https://ccdn.goodq.top/caches/9b69daffc17579b848483c854813cad2/aHR0cDovLzVjZGQzYWE1YzQ2ZWEudDczLnFpZmVpeWUuY29tL3FmeS1jb250ZW50L3VwbG9hZHMvMjAxOS8wNC84MzE0ZmY2ZjJiOTI3NzFmZjY3ZTk2N2VmNDI2MDNlYi00MDB4NDAwLTkwLndlYnA_p_p100_p_3D.webp',
                            id: 19,
                            title: '茉莉花茶',
                            price: '￥223.0',
                           },
                         
                        ]
                    },
                      {
                        title: '白茶',
                        children:[
                        {
                            img1:'https://ccdn.goodq.top/caches/9b69daffc17579b848483c854813cad2/aHR0cDovLzVjZGQzYWE1YzQ2ZWEudDczLnFpZmVpeWUuY29tL3FmeS1jb250ZW50L3VwbG9hZHMvMjAxOS8wNC8yOGVhMWYwNDRjY2E5Yjg1YTNhZmQzMTFjNzNlNjcyNC00MDB4NDAwLTkwLndlYnA_p_p100_p_3D.webp',
                            id: 20,
                            title: '霍山黄芽濛而银针',
                            price: '￥711.0',
                           },
                           {
                            img1:'https://ccdn.goodq.top/caches/9b69daffc17579b848483c854813cad2/aHR0cDovLzVjZGQzYWE1YzQ2ZWEudDczLnFpZmVpeWUuY29tL3FmeS1jb250ZW50L3VwbG9hZHMvMjAxOS8wNC84MzE0ZmY2ZjJiOTI3NzFmZjY3ZTk2N2VmNDI2MDNlYi00MDB4NDAwLTkwLndlYnA_p_p100_p_3D.webp',
                            id: 21,
                            title: '茉莉花茶',
                            price: '￥223.0',
                           },
                         
                        ]
                    },
                      {
                        title: '花茶',
                        children:[
                        {
                            img1:'https://ccdn.goodq.top/caches/9b69daffc17579b848483c854813cad2/aHR0cDovLzVjZGQzYWE1YzQ2ZWEudDczLnFpZmVpeWUuY29tL3FmeS1jb250ZW50L3VwbG9hZHMvMjAxOS8wNC8yOGVhMWYwNDRjY2E5Yjg1YTNhZmQzMTFjNzNlNjcyNC00MDB4NDAwLTkwLndlYnA_p_p100_p_3D.webp',
                            id: 22,
                            title: '霍山黄芽濛而银针',
                            price: '￥711.0',
                           },
                           
                         
                        ]
                    },
       ]
      };
    }
  };
</script>
<style scoped>
.img4 {
		width: 1280px;
		height: auto;
		padding-top: 50px;
		box-sizing: border-box;
	}
  .kk1 {
		width: 256px;
		height: 363px;
		float: left;
		margin-right: 50px;
		margin-top: 10px;
	}
	
	.kk1>div {
		width: 256px;
		height: 256px;
		background: red;
	}
	
	.kk1>div img {
		width: 256px;
		height: 256px;
		cursor: pointer;
	}
	
	.kk1>div img:hover {
		transition: all 1.5s;
		transform: scale(1.1);
	}

  .fynav {
    text-align: center;
    padding: 50px 0;
  }
/* .fk{
  width: 50px;
  height: 50px;
} */
  .cyzs i {
    width: 30px;
    display: block;
    color: #d1d1d1;
    font-style: normal;
    font-size: 13px;
    font-family: 微软雅黑;
    text-align: center;
    border: 1px solid #d1d1d1;
    line-height: 30px;
  }
  .cyzs i:hover {
    background: #529f11;
  }
  .top {
    width: 100%;
    margin-top: 150px;
    z-index: 99;
  }
  .cynav {
    width: 100%;
    padding: 10px 30px;
    display: flex;
    box-sizing: border-box;
    background: #f9f9f9;
  }
  .cynav_childlist {
    flex: 1;
    text-align: right;
    line-height: 77px;
  }
  .cynav_child h3 {
    line-height: 77px;
    font-family: 微软雅黑;
    font-size: 24px;
    font-weight: normal;
    font-style: normal;
    color: #333333;
    padding: 0 0 15px 0;
    display: block;
    padding: 0 0 15px 0;
  }
  .cynav_childlist div {
    display: inline-block;
    padding: 0 2px;
  }
  .cynav_childlist div {
    color: #929292;
  }
  .cynav_childlist div:hover {
    color: #529f11;
    border-bottom: 1px solid #529f11;
  }
  .cyBOX {
    width: 100%;
    min-height: 600px;
    /* padding: 30px 1px; */
   
  }
  .cyBOX span{
        color: #8e8e8e;
    font-size: 16px;
    font-family: sans-serif;
  }
  .cyBOX p{
    color: #555555;
    font-size: 16px;
    line-height: 22px;
  }
  .cyzs {
    max-width: 18%;
    display: inline-block;
    padding: 10px 15px;
  }
  .cyzs img {
    width: 100%;
  }
</style>
